<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入依赖包 -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 模板 -->
    <div id="app">
         <h1 v-upper.stop="keyword"></h1>
    </div>
    <!-- 模板2 -->
    <div id="app1">
        <div v-upper="big"></div>
    </div>
</body>

</html>
<script>
    //创建VM
    //拥有一个自定义指令v-upper:可以把字符串中小写的字符变为大写
    //自定指令
    //全局自定义指令、局部自定义指令
    //第一步：先定义，利用Vue.directive方法注册全局指令（自定义指令）
    //第二步：参数解释
    //第一个参数，自定义指令名字【在定义的时候，不需要前面加上v-】
    //第二个参数:回调函数,当你使用这个指令的时候，会执行一次
    //第三步:使用，在页面中v-xxx形式使用，当你使用的时候，回调会立即执行一次
    //修饰符：stop|prevent|once
    // Vue.directive("upper",(element,options)=>{
    //     //element：就是你绑定自定义指令的节点
    //     //options人家官方提供配置对象:
    //     //expression:keyword 指令右侧的关键字
    //     //modifiers:修饰符   
    //     //name:指令的名字不带V
    //     //raw-name:自定义指令全程
    //     //value: "aBcdEfg" 即为关键字数值
    //     //显现：v-upper让字符串中全都变为大写展示
    //     element.innerHTML = options.value.toUpperCase();
    // })

    let VM = new Vue({
        el: '#app',
        data: {
            keyword: 'aBcdEfg'
        },
        //自定义指令-可以多个自定义指令
        directives:{
            //函数的名字即为指令的名字
            upper(element,options){
                element.innerHTML= options.value.toUpperCase();
            }
        }
    });

    let VM1 = new Vue({
        el:"#app1",
        data:{
            big:'qwe'
        }
    })
</script>